<template>
	<view>
		
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				
				<text class="title">任务管理</text>
				<uni-icons type="search" size="16" color="#156DAC" style="margin-left: 10upx;" @click="showDrawer"></uni-icons> 
			</view>
		</uni-nav-bar>
		<view class="content padding">
			<view class="float-add-btn" v-if="userRole != '2'"><uni-icons type="plusempty" size="16" color="#fff" @click="handleAdd"></uni-icons></view>
			<view class="page-content-list">
				<block v-for="(value, index) in listData" :key="index">
					<view class="content-list-cell">
						<view class="order-item">
							<view class="order-item-header">
								<uni-icons v-if="value.taskStatus =='e009_03'" class="icon" type="checkbox-filled" size="18" color="#44a844"></uni-icons>
								<uni-icons v-else class="icon" type="info-filled" size="18" color="#999"></uni-icons>
								<text :style="{'color':value.taskStatus=='e009_03'?'#44a844':''}">{{value.taskStatusVal}}</text>
							</view>
							<view class="order-item-content">
								<view class="order-content-row">
									<view class="label">任务编号</view><view class="value">{{value.num}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">任务名称</view><view class="value">{{value.taskName}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">项目部</view><view class="value">{{value.projectDepartmentName}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">开始时间</view><view class="value">{{value.startTime ? parseTime(new Date(value.startTime)):'- -'}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">结束时间</view><view class="value">{{value.completionTime ? parseTime(new Date(value.completionTime)):'- -'}}</view>
								</view>
								<!-- <view class="order-content-row">
									<view class="label">状态</view><view class="value"></view>
								</view> -->
								<view class="order-content-row">
									<view class="label">操作</view>
									<view class="value">
										<template v-if="userRole == '1'">
											<button v-if="value.taskStatus === 'e009_02'" class="order-btn" @click="goDetail(value,'check')">审核</button>
										</template>
										<template v-if="userRole == '2'">
											<button v-if="value.taskStatus === 'e009_00'||value.taskStatus === 'e009_01'" class="order-btn" @click="goDetail(value,'apply')">处理</button>	
										</template>
										<button class="order-btn" @click="goDetail(value,'detail')">详情</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
		</view>
		<uniDrawer ref="draw" :mask="true" mode='right' :width="250">
			<view style="height: 90upx;">&nbsp;</view>
			<view class="draw-panel">
				<view class="drawer-form">
					<view class="drawer-form-item">
						<view class="drawer-label"><text>开始时间</text></view>
						<view class="drawer-content">
							<TimeSelector
								ref="stime"
								class="ipt-ctl"
							    :showType="timePickerType"
								@btnConfirm="(e)=>dateChange(e,'startDate')" 
							>
							    <text>{{query.startDate || '请选择开始时间'}}</text>
							</TimeSelector>
						</view>
					</view>
					<view class="drawer-form-item">
						<view class="drawer-label"><text>结束时间</text></view>
						<view class="drawer-content">
							<TimeSelector
								ref="etime"
								class="ipt-ctl"
							    :showType="timePickerType"
								@btnConfirm="(e)=>dateChange(e,'endDate')" 
							>
							    <text>{{query.endDate || '请选择结束时间'}}</text>
							</TimeSelector>
						</view>
					</view>
					<view class="drawer-form-item">
						<view class="drawer-label"><text>任务名称</text></view>
						<view class="drawer-content">
							<uni-easyinput class="ipt-ctl" v-model="query.taskName" maxlength="8" placeholder="请输入任务名称" />
						</view>
					</view>
					<!-- <view class="drawer-form-item">
						<view class="drawer-label"><text>排口</text></view>
						<view class="drawer-content">
							<text @click="showPkPicker">{{query.outletName || '请选择排口'}}</text>
							<tki-tree class="ipt-ctl" ref="tkitree" :range="range" :rangeKey="rangeKey" confirmColor="#4e8af7" @confirm="pkConfirm"/>
						</view>
					</view> -->
				</view>
				<view class="bottom-panel">
					<view class="item-btn lp" @click="handleQuery"><text>确定</text></view>
				</view>
			</view>
		</uniDrawer>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import TimeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import {parseTime,getRolePermiss} from '@/common/util.js'
	const listQuery = '/business/task/listPage'
	
	const getTree = '/base/outlet/listTree'
	const readTree = '/business/task/read'
	export default {
		components:{
			uniIcons,
			uniLoadMore,
			uniDrawer,
			TimeSelector,
			tkiTree
		},
		data() {
			return {
				reload: false,
				userRole: '',
				listData: [],
				last_id: '',
				status: 'loading',
				range: [],
				rangeKey: 'name',
				timePickerType: 'dateToTime',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				query: {
					page: 1, limit: 10, total: 0,
					startDate: null, endDate: null,
					taskName: ''
				},
			}
		},
		onLoad() {
			const role = uni.getStorageSync('USER_ROLE')// e036_01 运维
			this.userRole = getRolePermiss(role)
			this.getTreeData();
			const beforeTime = new Date().getTime() - 1000*60*60*24*3
			const time = parseTime(new Date(),'{y}-{m}-{d}')
			const before = parseTime(new Date(beforeTime),'{y}-{m}-{d}')
			this.query.startDate = before + ' ' + '00:00:00'
			this.query.endDate =  time + ' ' + '23:59:59'
			this.getList();
		},
		onShow(){
			this.getList();
		},
		onPullDownRefresh() {
			this.last_id = '';
			this.listData =  []
			this.query.page = 1
			this.getList();
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			},100)
		},
		onReachBottom() {
			this.status = 'more';
			this.getList();
		},
		methods: {
			parseTime,
			pageback(){
				uni.navigateBack({
					delta: 1
				});
			},
			goDetail(item,type){
				const user = uni.getStorageSync('USER_INFO');
				const {id} = item
				if(item != null && item.taskStatus === 'e009_00' && item.responsibleId === user.id){
					this.$api.request(readTree,{
						method: 'put',data:{id:id}
					})
					item.taskStatus = 'e009_01'
				}
				// alert(contentDescription)
				uni.navigateTo({
					url:`/pages/task/taskAdd/taskAdd?type=${type}&id=${id}`,
					success: (res)=>{
						let temp = JSON.parse(JSON.stringify(item))
						if(temp.helperId){
							const ids = temp.helperId.split(",")
							temp.helperId = ids
						}
						res.eventChannel.emit('taskDetail', { data: temp })
					}
				})
			},
			handleQuery() {
				this.query.page = 1
				this.getList();
				this.$refs.draw.close()
			},
			getTreeData() {
				this.$api.request(getTree,{
					method: 'get',
				}).then(res=>{
					if(res.success){
						// 过滤无排口数据
						const result = []
						res.data.list.map(item=>{
							if(item.children && item.children.length > 0){
								result.push(item)
							}
						})
						this.range = result
					}
				}).catch(()=>{
				})
			},
			showPkPicker() {
				this.$refs.tkitree._show()
			},
			pkConfirm(e) {
				console.log(e)
				if(e.length > 0){
					const {id,name} = e[0]
					this.query.outletId = id
					this.query.outletName = name
				}
			},
			showDrawer(){
				this.$refs.draw.open()
			},
			handleAdd(){
				uni.navigateTo({
					url:`/pages/task/taskAdd/taskAdd?type=add`
				})
			},
			dateChange(res,type){
				this.query[type] = res.key
			},
			getList(loadMore = false){
				this.status = 'loading';
				this.$api.request(listQuery,{
					method: 'get',
					data: this.query
				}).then(res=>{
					console.log(res)
					if(res.success) {
						const data = res.data
						const {list,total} = data
						if(list.length === 0 || total <= this.query.limit){
							this.status = ''
						}
						if(loadMore){
							this.listData = [...this.listData,...list]
						}else{
							this.listData  = list
						}
						this.last_id = this.listData[this.listData.length - 1];
						this.reload = false;
					}else{
						this.status = ''
						this.$api.toastMsg(res.message)
					}
				}).catch(()=>{
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-content-list{
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		.content-list-cell{
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}
	.order-item{
		width: 750upx;
		background: #fff;
		padding: 20upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
		.order-item-content{
			margin-top: 30upx;
			.order-content-row{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26upx;
				margin-bottom: 30upx;
				.order-btn{
					display: inline-block;
					background-color: #156dac;
					color: #fff;
					width: 95upx;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					font-size: 24upx;
					padding: 0;
					margin-left: 10upx;
				}
				.label{
					flex: 0 0 200upx;
					color: #5A5A5A;
					text-align: left;
					font-size: 26upx;
				}
				.value{
					flex: 1;
					color: #000;
					text-align: right;
					font-size: 26upx;
				}
			}
			
		}
			
		.order-item-header{
			display: flex;
			align-items: center;
			.icon{
				margin-right: 10upx;
			}
			text{
				color: #333;
				font-size: 28upx;
			}
		}
	}
</style>
